<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线书城-全世界最大书城-订单详情</title>
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/commons.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2466032_1guctssow9r.css">
    <script src="js/jquery.min.js"></script>
    <style>
        .hotpro{
            position: relative;
            top:75px;
        }
        .hotpro .main .left{
            float: left;
            width: 50px;
            height: 500px;
        }
        .hotpro .mian .left ul{
            height: 300px;
        }
        .hotpro .main .left .title{
            font-weight: bold;
            font-size: 18px;
        }
        .hotpro .main .left ul li{
            font-size: 18px;
            line-height: 50px;
            width: 120px;
            height: 50px;
            text-align: center;
        }
        .hotpro .main  .right .right_top h4{
            margin-left: 20px;
        }
        .hotpro .main .right .right_top .right_order *{
            line-height: 30px;
        }
        .hotpro .main .right .right_content{
            margin-top: 4px;
            margin-left: 150px;
        }
        .hotpro .main .right .right_content table{
            text-align: center;
        }
        #order_detail{
            border: 1px solid chocolate;
            height: 100px;
            margin-top:20px;
            background-color:#F5F5F5;
        }
        #order_detail span{
            margin-left: 50px;
            float: left;
            margin-top: 20px;
        }
        #order_detail button:nth-of-type(1){
            position: absolute;
            width: 100px;
            height: 30px;
            background-color: chocolate;
            margin-left: 20px;
            font-weight: bold;
            font-size: 15px;
            color: white;
        }
        #order_detail button:nth-of-type(2){
             position: absolute;
             width: 100px;
             height: 30px;
             background-color: darkcyan;
             font-weight: bold;
             font-size: 15px;
             color: white;
             left: 340px;
         }
        #order_detail button:nth-of-type(3){
            position: absolute;
            width: 100px;
            height: 30px;
            background-color: cornflowerblue;
            font-weight: bold;
            font-size: 15px;
            color: white;
            left: 460px;
        }
        .hotpro .main .right .right_content .order_detail table{
            margin:5px auto;
            border: 1px solid #ccc;
            border-collapse:collapse;
            width: 100%;
        }
        .hotpro .main .right .right_content .order_detail table td,
        .hotpro .main .right .right_content .order_detail table th{
            border: 1px dotted #ccc;
            height: 30px;
        }
        .hotpro .main .right .right_content .order_detail table th{
            background-color: #f7f7f7;
            font-size: 13px;
        }
        .hotpro .main .right .right_content .order_detail table tr:first-child{
            font-size: 16px;
            text-align: left;
            color:red;
            background:linear-gradient(to right bottom,#f8f8f8,#f0f0f0);
            text-indent: 10px;
            height: 30px;
            line-height: 30px;
            font-family: 黑体;
            /*font-weight: bold;*/
        }
        .hotpro .main .right .right_content .order_detail table.good_list tr.title th{
            background:linear-gradient(to right bottom,#fff89e,#fff89e);
            height: 32px;
            line-height: 32px;
        }
        .hotpro .main .right .right_content .order_detail table.good_list tr:first-child td{
            text-align: left;
        }
        .hotpro .main .right .right_content .order_detail table.good_list td{
            text-align: center;
        }
        .hotpro .main .right .right_content .order_detail table.good_list td img{
            padding: 10px;
            height: 80px;
            width: 60px;
        }
    </style>
</head>
<body>
<!-- 头部开始 -->
<div class="header flux clearfix">
    <div class="container">
        <h1 class="logo l">
            <img src="./images/logo.jpeg" alt="">
        </h1>
        <ul class="shortcut">
            <li>
                <img src="./images/addr.png" alt="">
                北京
                <img src="./images/xia.png" alt="">
            </li>
            <li onclick="window.location.href='index.html'" class="index">首页</li>
            <li class="classify" onclick="location.href='classify.html'">分类</li>
            <li>
                <img src="./images/search.png" alt="">
                <input id="text_search" type="text" placeholder="搜索图书、课堂、文艺类">
                <button id="btn_search">搜索</button>
                <script>
                    $(function () {
                        $("#text_search").val(sessionStorage.getItem("name"));
                    });
                    $("#btn_search").click(function () {
                        let name=$("#text_search").val();
                        sessionStorage.setItem("name",name);
                        location.href="search.html";
                    })
                </script>
            </li>
            <li>
                <img src="./images/user.png" alt="">
                <span  id="toLogin" onclick="window.location.href='login.html'">登录</span>
            </li>
            <li>
                <img src="./images/phone.png" alt="">
                <span id="register" onclick="location.href='regist.html'">注册</span>
            </li>
            <li>
                <div class="shopcart" onclick="window.location.href='./shopcart.html'">
                    <i class="iconfont icon-gouwuche" style="font-size:20px"></i>
                    <span>购物车</span>
                    <span id="shopNum"></span>
                </div>
            </li>
        </ul>
    </div>
</div>
<!-- 头部结束 -->
<!-- 个人中心开始 -->
<div class="hotpro container">
    <div class="title clearfix">
        <div class="first-title l">会</div>
        <div class="second-title l">员中心</div>
    </div>
    <div class="main clearfix">
        <div class="left">
            <ul>
                <li class="title">交易记录</li>
                <li><a href="myOrder.html" style="color: cornflowerblue">我的订单</a></li>
                <li class="title">个人设置</li>
                <li><a href="address.html">地址管理</a></li>
                <li><a href="#">修改头像</a></li>
                <li><a href="#">修改密码</a></li>
            </ul>
        </div>
        <div class="right">
            <div class="right_content">
                <h3 class="title" style="text-align: center">订单详情</h3>
                <div id="order_detail">
                    <span id="span1"></span>
                    <span id="span2"></span>
                    <span id="span3"></span><p id="p1" style="color: red;margin-top: 20px"></p><br>
                    <button onclick="cancel_order()">取消订单</button>
                    <button id="btn_choose" onclick="location.href='pay.html'">立即购买</button>
                    <button onclick="location.href='myOrder.html'">返回</button>
                </div>
                <div class="order_detail">
                    <table>
                        <tr>
                            <td colspan="2">收件人信息</td>
                        </tr>
                        <tr>
                            <th width="80px">收货人：</th>
                            <td id="accept">张三</td>
                        </tr>
                        <tr>
                            <th>地址：</th>
                            <td id="address">乐山理工学院</td>
                        </tr>
                        <tr>
                            <th>手机号码：</th>
                            <td id="telphone">18988889999</td>
                        </tr>
                    </table>

                    <table>
                        <tr>
                            <td colspan="2">支付及配送方式</td>
                        </tr>
                        <tr>
                            <th width="80px">支付方式：</th>
                            <td id="payType">在线支付</td>
                        </tr>
                    </table>

                    <table class="good_list" id="goods_list">
                        <tr>
                            <td colspan="5">商品清单</td>
                        </tr>
                        <tr class="title">
                            <th>图片</th>
                            <th>商品名称</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                            <th>小计</th>
                        </tr>
                    </table>
                </div>
            </div>
        </div><!--right end-->
    </div>
</div>
<!-- 个人中心结束 -->
<!-- 底部栏开始 -->
<div class="footer flux">
    <div class="f1 container">
        <ul>
            <li>
                <div class="tb1"></div>
                <div class="tbc">品类齐全，轻松购物</div>
            </li>
            <li>
                <div class="tb2"></div>
                <div class="tbc">多仓直发，极速配送</div>
            </li>
            <li>
                <div class="tb3"></div>
                <div class="tbc">正品行货，精致服务</div>
            </li>
            <li>
                <div class="tb4"></div>
                <div class="tbc">天天低价，畅选无忧</div>
            </li>
        </ul>
    </div>
    <div class="operator"></div>
    <div class="f2 container">
        <div>
            <ul>
                <li>购物指南</li>
                <li>
                    <a href="#">购物流程</a>
                </li>
                <li>
                    <a href="#">会员介绍</a>
                </li>
                <li>
                    <a href="#">生活旅行/团购</a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">大家电</a>
                </li>
                <li>
                    <a href="#">联系客服</a>
                </li>
            </ul>
        </div>
        <div>
            <ul>
                <li>购物指南</li>
                <li>
                    <a href="#">购物流程</a>
                </li>
                <li>
                    <a href="#">会员介绍</a>
                </li>
                <li>
                    <a href="#">生活旅行/团购</a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">大家电</a>
                </li>
                <li>
                    <a href="#">联系客服</a>
                </li>
            </ul>
        </div>
        <div>
            <ul>
                <li>购物指南</li>
                <li>
                    <a href="#">购物流程</a>
                </li>
                <li>
                    <a href="#">会员介绍</a>
                </li>
                <li>
                    <a href="#">生活旅行/团购</a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">大家电</a>
                </li>
                <li>
                    <a href="#">联系客服</a>
                </li>
            </ul>
        </div>
        <div>
            <ul>
                <li>购物指南</li>
                <li>
                    <a href="#">购物流程</a>
                </li>
                <li>
                    <a href="#">会员介绍</a>
                </li>
                <li>
                    <a href="#">生活旅行/团购</a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">大家电</a>
                </li>
                <li>
                    <a href="#">联系客服</a>
                </li>
            </ul>
        </div>
        <div>
            <ul>
                <li>购物指南</li>
                <li>
                    <a href="#">购物流程</a>
                </li>
                <li>
                    <a href="#">会员介绍</a>
                </li>
                <li>
                    <a href="#">生活旅行/团购</a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">大家电</a>
                </li>
                <li>
                    <a href="#">联系客服</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="f3 container">
        <span>关于我们</span><span>|</span>
        <span>联系我们</span><span>|</span>
        <span>联系客服</span><span>|</span>
        <span>合作招商</span><span>|</span>
        <span>商家帮助</span><span>|</span>
        <span>营销中心</span><span>|</span>
        <span>English Site</span><span>|</span>
        <span>Media & IR</span>
    </div>
    <div class="f4 container">
        <span>Copyright &copy; 2020 - 2021  乐山LS.com 版权所有</span>
        <span>|</span>
        <span>消费者维权热线：4006067733经营证照</span>
        <span>|</span>
        <span>(川)网械平台备字(2020)第00004号</span>
        <span>|</span>
        <span>营业执照</span>
    </div>
</div>
<!-- 底部栏结束 -->
</body>
<script src="js/toLogin.js"></script>
<script>
    let orderNo=location.href.split("=")[1];
    let orderId=location.href.split("=")[2];

    $.ajax({
        url:"order/byOrderNo",
        type:"get",
        datatype:"json",
        data:{"orderNo":orderNo},
        success:function (res) {
            $("#span1").text("订单号:"+orderNo);
            $("#span2").text("下单日期:"+res.ordertime);
            $("#span3").text("订单状态:");
            if(res.status==1){
                $("#p1").text("待支付");
                $("#btn_choose").text("立即支付");
            }else if(res.status==2){
                $("#p1").text("待确认收货");
                $("#btn_choose").text("确认收货");
            }else{
                $("#p1").text("待评价");
                $("#btn_choose").text("立即评价");
            }
            $("#accept").text(res.accept);
            $("#address").text(res.address);
            $("#telphone").text(res.telphone);
            if(res.paytype==1){
                $("#payType").text("在线支付");
            }else{
                $("#payType").text("货到付款");
            }
        }
    });

    $.ajax({
        url:"order/orderItem?id="+orderId,
        type:"post",
        success:function (res) {
            let totalPrice=0.0;
            for(let i=0;i<res.length;i++){
                let tr=$("<tr></tr>");
                let imaTd=$("<td></td>");
                let img=$("<img src='"+res[i].goods.image+"'/>");
                imaTd.append(img);
                let name=$("<td></td>").text(res[i].goods.name);
                let price=$("<td></td>").text(res[i].price);
                let nums=$("<td></td>").text(res[i].nums);
                let total=$("<td></td>").text((res[i].price*res[i].nums).toFixed(1));
                totalPrice+=(res[i].price*res[i].nums);
                tr.append(imaTd,name,price,nums,total);
                $("#goods_list").append(tr);
            }
            let tr1=$("<tr></tr>");
            let td=$("<td colspan='6' style='background-color: #f7f7f7;text-align: right;font-size: 15px;font-weight: bold'></td>").text("订单支付金额:");
            let p=$("<p style='color: red;display: inline;'></p>").text(totalPrice.toFixed(1));
            td.append(p);
            tr1.append(td);
            $("#goods_list").append(tr1);
        }
    });
    function cancel_order() {
        $.ajax({
            url:"order/cancelOrder",
            type:"get",
            dataType:"json",
            data:{
                "orderno":orderNo,
            },
            success:function () {
                location.href="myOrder.html";
            }
        });
    }
</script>
</html>